<template>
    <div class="container" ref="mapDiv"></div>
</template>

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { ref, onMounted, createApp } from "vue";
// import "leaflet-geotiff";

// import "leaflet-geotiff-2";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-rgb";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-vector-arrows";
// import "leaflet-geotiff-2/dist/leaflet-geotiff-plotty"; // requires plotty


// import "leaflet-geotiff/leaflet-geotiff-plotty"
// import "leaflet-geotiff/leaflet-geotiff-vector-arrows"



// import "../../../public/geotiff/plotty.js"
// import "../../../public/geotiff/geotiff.js"
// import "../../../public/geotiff/leaflet-geotiff.js"
// import "../../../public/geotiff/leaflet-geotiff-plotty.js";


import hebeiData from "./hebei.json";
import hebeiPoint from "./point.js";
import locationIcon from "../../assets/images/location.png";
import popupContent from "./popupContent.vue";
// 天地图密钥
const tdtKey = "1b8fafda6dd51c9c1f84e7e3134e5a3c";
onMounted(() => {
    initMap();
});
// 初始化天地图
const mapDiv = ref(null);
var map = null;
let appInstance = null;
const initMap = () => {
    // 初始化地图
    map = L.map(mapDiv.value, {
        minZoom: 6, //最小缩放值
        maxZoom: 18, //最大缩放值
        center: L.latLng(39.652781, 116.863876), //注意和其他地图经纬度格式区别
        zoom: 7, //初始缩放值
        zoomControl: false, //是否启用地图缩放控件
        attributionControl: false, //是否启用地图属性控件
    });
    let satelliteTileLayer = L.layerGroup([
        L.tileLayer(
            `http://t0.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=${tdtKey}`
        ),
        L.tileLayer(
            `http://t0.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=${tdtKey}`
        ),
    ]);
    satelliteTileLayer.addTo(map);
    // 添加geoJSON数据染色
    L.geoJSON(hebeiData, {
        style: function () {
            return {
                color: "#3388ff",
                fillColor: "#3388ff",
                fillOpacity: 0.6,
            };
        },
    }).addTo(map);

    hebeiPoint.forEach((item, index) => {
        let myIcon = L.icon({
            iconUrl: locationIcon,
            iconSize: [54, 60],
        });
        let marker = L.marker([item.latlng[0], item.latlng[1]], {
            icon: myIcon,
        });
        let popup = L.popup()
            .setLatLng(item.latlng)
            .setContent('<div id="popup"></div>');

        marker.addTo(map);
        marker.on("click", function () {
            map.flyTo(item.latlng, map.getZoom(), {
                duration: 0.5, // 持续时间（以秒为单位）
                easeLinearity: 0.25, // 缓动效果，可调整动画的平滑度
            });
            setTimeout(() => {
                marker.bindPopup(popup).openPopup();
                appInstance = createApp(popupContent, { data: item });
                appInstance.mount("#popup");
            }, 200);
        });
    });
    // const url =
    //     "https://stuartmatthews.github.io/leaflet-geotiff/tif/wind_speed.tif";
    // const options = {
    //     renderer: null,
    //     useWorker: false,
    //     bounds: [],
    //     band: 0,
    //     image: 0,
    //     clip: undefined,
    //     pane: "overlayPane",
    //     onError: null,
    //     sourceFunction: GeoTIFF.fromUrl,
    //     arrayBuffer: null,
    //     noDataValue: undefined,
    //     noDataKey: undefined,
    //     blockSize: 65536,
    //     opacity: 1,
    //     clearBeforeMove: false,
    // };

    // // create layer
    // var layer = L.leafletGeotiff(url, options).addTo(map);
    // 创建GeoTIFF图层并添加到地图上
    // let renderer = L.LeafletGeotiff.plotty({
    //     displayMin: 0,
    //     displayMax: 30,
    //     clampLow: false,
    //     clampHigh: true,
    //     colorScale: "picnic",
    // });
    // L.leafletGeotiff("./tmp.tif", {
    //     band: 0,
    //     renderer: renderer,
    // }).addTo(map);
};
</script>

<style lang="less" scoped>
.container {
    width: 100vw;
    height: 100vh;
}
:deep(.leaflet-popup) {
    width: 700px;
}
</style>
